<template>
    <div id="profile">
        <div id="image-box">
            <van-image
                    width="100%"
                    height="100%"
                    src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1726760651,3142774542&fm=26&gp=0.jpg"
            />
            <div id="shadow">
                <span>
                    AJ128912781218920
                </span>
                <span id="img-span">
                      <img src="../../assets/er.svg">
                </span>

            </div>
        </div>
        <div id="cell">
            <van-cell is-link title="会员卡" icon="credit-pay" @click="show = true" />
            <van-cell  title="我的积分" icon="after-sale" value="20" />
        </div>
        <div id="grid">
            <van-grid :column-num="3">
                <van-grid-item icon="vip-card-o" text="我的劵" @click="dis" />
                <van-grid-item icon="certificate" text="我的权益" @click="cer" />
                <van-grid-item icon="user-circle-o" text="我的资料" @click="details" />
            </van-grid>
            <van-grid :column-num="2">
                <van-grid-item icon="balance-list-o" text="我的订单" />
                <van-grid-item icon="chart-trending-o" text="我的视力档案" @click="ell" />
            </van-grid>
        </div>

    </div>
</template>

<script>
    import { Image as VanImage } from 'vant';
    import {Grid, Cell, GridItem} from "vant";
    export default {
        name: "Profile",
        components: {
            "van-cell": Cell,
            "van-grid": Grid,
            "van-grid-item": GridItem,
            "van-image":VanImage
        },
        methods: {
            details(){
                this.$router.push("/memberCenter");
            },
            points(){
                this.$router.push("/integral");
            },
            dis(){
              this.$router.push("/discount");
            },
            ell(){
                this.$router.push("/visionRecord")
            },
            cer(){
                this.$router.push("/MyPrivilege")
            }
        }
    }
</script>

<style lang="less">
    #profile{
        margin-top: 60px;
        #image-box{
            margin-top: 5px;
            margin-bottom: 5px;
            height: 240px;
            #shadow{
                height: 25px;
                background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
                img{
                    width: 20px;
                }
                span{
                    color: #FFFFFF;
                    font-size: 12px;
                    text-align: center;
                    line-height: 25px;
                }
                #img-span{
                    text-align: center;
                    float: right;
                    margin-right: 5px;
                    line-height: 25px;
                }
            }
        }
    }
</style>
